<template>
  <div class="bg">
    <my-header backBtn>
      <div slot="title">
        家长注册
      </div>
    </my-header>
    <div class="add_block oh">
      <div class="add_title">家长信息</div>

      <div class="add_search_item tl">
        <div class="search_name fl" style="font-size: 1.8rem;color: black;">家长姓名</div>
        <div class="search_input fl required" style="margin-left: 10px;">
          <input
            style="width: 20rem;height: 2rem;"
            type="text"
            placeholder="请输入家长姓名"
            v-model="form.name"
            @blur="required(form.name, '家长姓名')"
          />
        </div>
      </div>

      <div class="add_search_item tl">
        <div class="search_name fl" style="font-size: 1.8rem;color: black;">手机号码</div>
        <div class="search_input fl required" style="margin-left: 10px;">
          <input
            style="width: 20rem;height: 2rem;"
            type="text"
            placeholder="请输入手机号码"
            v-model="form.phone"
            @blur="required(form.phone, '手机号码')"
          />
        </div>
      </div>

      <div class="add_search_item tl">
        <div class="search_name fl" style="font-size: 1.8rem;color: black;">书包编码</div>
        <div class="search_input fl required" style="margin-left: 10px;">
          <input
            style="width: 20rem;height: 2rem;"
            type="text"
            placeholder="请输入书包编码"
            v-model="form.gpsid"
            @blur="required(form.gpsid, '书包编码')"
          />
        </div>
      </div>

      <div class="add_search_item tl red-text">
        温馨提示：带 * 号为必填项
      </div>
    </div>
    <div v-if="this.tj" class="next-btn" style="margin: 20px auto;" @click="submit">提交</div>
  </div>
</template>

<script>
export default {
  name: "perRegistered",
  data(){
    return{
      form:{
        name:'',
        phone:'',
        gpsid:'',
      },
      custom:false,
      tj:true
    }
  },
  methods:{
    submit(){
      if(!this.form.name||!this.form.phone||!this.form.gpsid){
        this.$weui.topTips("请输入完整信息！");
        return;
      }
      this.$http.fetchPersonalGps({gpsid: this.form.gpsid}).then(res=>{
        if(res.data){
          let data = {
            openId:this.$Cookies.get("openId"),
            name:this.form.name,
            phone:this.form.phone,
          }
          this.$http.fetchPersonalBind(data).then(res=>{
            //跳转重新加载
            this.tj=false;
            this.$router.push({
              path: '/index',
              query: {
                selectType: 'personal'
              }
            });
            ///(Android)/i.test(navigator.userAgent) ? this.$router.go(-3) : location.href = "javascript:history.go(-3);";
          })
        }else{
          this.$weui.topTips("书包编码错误！");
        }
      })
    },
    required(value, txt) {
      if (!value) {
        //this.$weui.topTips(txt + "不能为空");
        this.custom=false
        return;
      }
      if (txt === "手机号码") {
        if (!/^1[3456789]\d{9}$/.test(value)) {
          this.$weui.topTips("输入的手机号码有误");
          this.custom=false;
          return;
        }else{
          this.custom=true;
          return;
        }
      }
      this.custom=true;
    }
  },
  mounted() {

  }
}
</script>

<style scoped>
  .add_block {
    width: calc(100% - 20px);
    margin: 1.5rem auto;
    height: auto;
    border-radius: 6px;
    background: #ffffff;
  }
  .oh {
    overflow: hidden;
  }
  .add_title {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    font-weight: bold;
    color: rgba(16, 16, 16, 1);
  }
  .add_search_item {
    width: 90%;
    margin: 0 auto 1rem auto;
    height: 3rem;
    line-height: 3rem;
  }
  .required {
    position: relative;
  }
  .required::after {
    content: "*";
    position: absolute;
    color: red;
    right: -1rem;
    top: -0;
  }
  .bg{
    width: 100%;
    height: 100%;
  }
  .red-text {
    color: #ff3246;
    font-size: 1.4rem;
  }
  .next-btn {
    width: 16rem;
    height: 4rem;
    line-height: 4rem;
    border-radius: 4px;
    background-color: #36c12d;
    color: #ffffff;
    font-size: 1.6rem;
    text-align: center;
    margin: 0 1rem;
  }
</style>
